import React, { useState, useEffect } from 'react'
import './index.less'
import { Divider, PullRefresh, List, Tabs, Cell, Loading, Flex } from 'react-vant';
import { CartCircleO } from '@react-vant/icons';
import { history } from 'umi';

import {
  Gift, PendingPayment, SendGiftO, RefundO,
  Passed, Logistics, ChatO, SmileCommentO, LocationO,
  ServiceO, AfterSale, Scan, SettingO
} from '@react-vant/icons';
import axios from 'axios';




export default function My() {

  const [list, setlist] = useState([])
  const [newlist, setnewlist] = useState([])
  const [num, setnum] = useState(4)
  const [flag, setflag] = useState(false)
  const [op, setop] = useState(false)

  useEffect(() => {
    getlist()
    window.addEventListener('scroll', han)
  }, [num])

  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/zgh_my_look')
    console.log(data);
    var list = data.data
    var newlist = []
    while (newlist.length < list.length) {
      const index = Math.floor(Math.random() * list.length)
      const e_index = list.findIndex(ele => ele._id == list[index]._id)
      if (e_index != -1) {
        newlist.push(list[index])
      }
    }
    console.log(newlist);
    setnewlist(newlist)
  }

  window.onscroll = function () {
    if (num <= newlist.length - 4) {
      if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 1) {
        setflag(true)
        var time = setTimeout(() => {
          setnum(num + 4)
          setflag(false)
          clearTimeout(time)
        }, 300)
      }
    }
  }

  const han = () => {
    if (window.scrollY >= 500) {
      setop(true)
    } else {
      setop(false)
    }
  }

  return (
    <div className='my'>
      {/* 头部 */}
      <div className='top'>
        我的
      </div>

      {/* 用户信息展示 */}
      <div className='user_look'>

        {/* 头像以及签到 */}
        <div className='user_top'>

          <div className='user_left'>

            {/* 图片 */}
            <div className='user_img'>
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
            </div>

            {/* 手机号 */}
            <div className='user_phone'>17559568177</div>

          </div>

          <div className='user_right' onClick={() => { history.push('/jifen'); }}>
            <Gift className='user_an' />签到领积分
          </div>

        </div>

        {/* 优惠劵 */}
        <div className='user_bottom'>
          <div>
            <span style={{ fontWeight: '800' }}>4</span>
            <span>优惠劵</span>
          </div>
          <div>
            <span style={{ fontWeight: '800' }}>30</span>
            <span>积分</span>
          </div>
          <div>
            <span style={{ fontWeight: '800' }}>3</span>
            <span>消息</span>
          </div>
        </div>



      </div>

      {/* 我的订单 */}
      <div className='my_ding'>

        {/* 上 */}
        <div className='my_top'>
          <div>我的订单</div>
          <div>查看全部订单</div>
        </div>

        {/* 下 */}
        <div className='my_bottom'>

          <div>
            <span><PendingPayment className='my_bottom_an' /></span>
            <span>待支付</span>
          </div>

          <div>
            <span><SendGiftO className='my_bottom_an' /></span>
            <span>待发货</span>
          </div>

          <div>
            <span><Logistics className='my_bottom_an' /></span>
            <span>待收货</span>
          </div>

          <div>
            <span><ChatO className='my_bottom_an' /></span>
            <span>待评价</span>
          </div>

          <div>
            <span><Passed className='my_bottom_an' /></span>
            <span>已完成</span>
          </div>

          <div>
            <span><AfterSale className='my_bottom_an' /></span>
            <span>退款</span>
          </div>

        </div>

      </div>

      {/* 常用工具 */}
      <div className='common'>

        <div className='common_top'>
          <div>常用工具</div>
        </div>

        <div className='common_bottom'>
          <div>

            <div onClick={()=>history.push('/address')}>
              <span><LocationO className='my_bottom_an' /></span>
              <span>地址管理</span>
            </div>

            <div>
              <span><ServiceO className='my_bottom_an' /></span>
              <span>在线客服</span>
            </div>

            <div onClick={()=>history.push('/feedback')}>
              <span><SmileCommentO className='my_bottom_an' /></span>
              <span>意见反馈</span>
            </div>

          </div>
          <div>

            <div>
              <span><SettingO className='my_bottom_an' /></span>
              <span>设置</span>
            </div>

            <div>
              <span><Scan className='my_bottom_an' /></span>
              <span>扫一扫</span>
            </div>

            <div>
              {/* <span><RefundO className='my_bottom_an' /></span>
                  <span>退款</span> */}
            </div>

          </div>
        </div>

      </div>

      <div className='text'>
        <Divider style={{ padding: '0 60px', fontSize: '19px', color: '#000' }}>为您推荐</Divider>
      </div>

      <div className='tui'>
        {
          newlist.slice(0, num).map((ele, index) => {
            return <div className='tui_con' key={index} onScroll={() => {
              console.log(1111);
            }}>
              <img src={ele.img} alt="" />
              <div>
                <p className='tui_txt'>{ele.title}</p>
                <p>￥{ele.price}</p>
                <CartCircleO color='#fff' className='tui_btn' />
              </div>
            </div>
          })
        }
      </div>
      <div className='go_top' style={{ display: op ? 'block' : 'none' }} onClick={() => {

        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }}>↑</div>
      <div className='loding' style={{ display: flag ? 'block' : 'none' }}>

        <Loading type="ball" size='25' />

      </div>
      <div className='bottom'></div>
      <div>

      </div>
    </div>
  )
}
